<template>
  <div class="report-main" ref="all">
    <div class="top">
      <div>
        <el-select
          v-model="app_id"
          placeholder="请选择"
          size="small"
          @change="getList"
        >
          <el-option
            v-for="item in processIdOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.num
            }}</span>
          </el-option>
        </el-select>
      </div>
      <el-input
        v-model="search"
        size="small"
        style="width: 300px"
        :placeholder="$t('流程名称、申请人、当前负责人', 'processCenter.pac')"
        suffix-icon="el-icon-search"
        @keydown.native.enter="getList"
      ></el-input>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :label="$t('序号', 'processCenter.order')"
          width="55"
        >
        </el-table-column>
        <el-table-column
          :label="$t('流程名称', 'processCenter.processName')"
          prop="process_rule.process_rule_name"
        ></el-table-column>
        <el-table-column
          :label="$t('申请人', 'processCenter.applicant')"
          prop="submit_employee"
        >
          <template slot-scope="scope">
            <show-person :personInfo="scope.row.submit_employee" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('当前节点', 'processCenter.currentNode')">
          <template slot-scope="scope">
            <span v-if="scope.row.process_rule_current_node">
              {{ scope.row.process_rule_code }}-{{
                scope.row.process_rule_current_node
              }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('当前处理人', 'processCenter.currentOwn')"
          prop="current_task_employee"
        >
          <template slot-scope="scope">
            <show-person :personInfo="scope.row.current_task_employee" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageInfo.page_sizes"
      :current-page.sync="pageInfo.page"
      :page-size="pageInfo.page_size"
      layout="total, sizes, prev, pager, next"
      :total="pageInfo.total"
      style="margin-bottom: 10px; margin-top: 10px"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getTargetProcessInfo } from "@/http/api";
import base from "./base.vue";
import dayjs from "dayjs";
import tools from "@/utils/tools";
import showPerson from "@/components/public/showPerson.vue";
export default {
  extends: base,
  name: "predicttodo",
  components: { showPerson },
  data() {
    return {
      app_id: "all",
      search: "",
      tableData: [],
      processIdOptions: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getTargetProcessInfo({
        mode: "will_do",
        ...this.pageInfo,
        key: this.search,
        app_id: this.app_id,
      });
      if (res.code === 20041) {
        this.pageInfo = res.data.page;
        this.tableData = res.data.rows;
        this.tableData.forEach((element) => {
          element.submit_time = dayjs(element.submit_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
        tools.getProcessIdOptions(this, res);
      }
    },
    rowClick(row) {
      this.$router.push({
        path: tools.getUrl(row.app_id),
        query: {
          process_id: row.process_id,
          mode: "will_do",
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  padding: 20px 0 16px;
  display: flex;
  justify-content: space-between;
}
</style>
